<template>
  <template
    v-for="(menu, index) in myList"
    :key="index"
  >
    <lay-menu-item :id="menu.id">
      <template #icon>
        <lay-icon :type="menu.icon"></lay-icon>
      </template>
      <template #title>{{ menu.title }}</template>
    </lay-menu-item>
  </template>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";

export default defineComponent({
  name: "GlobalMainMenuItem",
  props: {
    menus: {
      type: Object,
    },
  },
  setup(props) {
    onMounted(() => {
      getMenuList();
    });

    const data = reactive({
      myList: [] as any,
    });

    const getMenuList = () => {
      let list: any = sessionStorage.getItem("menuList");
      data.myList = JSON.parse(list);
      console.log("t++--++", data.myList);
    };

    return {
      ...toRefs(data),
    };
  },
});
</script>
